<template>
    <!-- 条件查询 -->
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.Name" placeholder="请输入姓名" clearable />
    </el-form-item>
     <el-form-item label="审批状态">
      <el-select v-model="formInline.ApprovalState" placeholder="请选择审批状态">
        <el-option label="已审批" :value="true" />
        <el-option label="待审批" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="请假时间">
      <el-date-picker
        v-model="formInline.LeaveStatrTime"
        type="date"
        placeholder="请选择开始时间"
        clearable
      />--
      <el-date-picker
        v-model="formInline.LeaveEndTime"
        type="date"
        placeholder="请选择结束时间"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getapproval">查询</el-button>
    </el-form-item>
  </el-form>
    <el-button type="success" @click="openadd()">新增</el-button>
    <!-- 列表 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="name" label="姓名" width="90" />
    <el-table-column prop="bname" label="部门" width="120" />
    <el-table-column prop="typeId" label="请假类别" width="100" />
    <el-table-column prop="leaveStatrTime" label="请假时间" width="190" >
        <template v-slot="scope">
            <span>{{ moment(scope.row.leaveStatrTime).format("YYYY-MM-DD") }}至{{ moment(scope.row.leaveEndTime).format("YYYY-MM-DD") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="countHours" label="总工时" width="100" />
    <el-table-column prop="baodaoTime" label="报到时间" width="150" >
         <template v-slot="scope">
            <span>{{ moment(scope.row.baodaoTime).format("YYYY-MM-DD") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="qingYuan" label="请假事由" width="120" />
     <el-table-column prop="buFuName" label="部门领导" width="120" />
      <el-table-column prop="approvalState" label="审批状态" width="120" >
        <template v-slot="scope">
            <el-tag v-if="scope.row.approvalState==true">已审批</el-tag>
            <el-tag type="danger" v-else>待审批</el-tag>
        </template>
      </el-table-column>
       <el-table-column prop="createTime" label="创建时间" width="150" >
          <template v-slot="scope">
            <span>{{ moment(scope.row.createTime).format("YYYY-MM-DD") }}</span>
        </template>
        </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template v-slot="scope">
        <el-button :disabled="scope.row.approvalState==true"  type="danger" size="small" @click="delApproval(scope.row.id)"> 删除</el-button>
        <el-button :disabled="scope.row.approvalState==true"  type="primary" size="small" @click="eidt(scope.row)">修改</el-button>
        <el-button  type="success" size="small" v-if="scope.row.approvalState==false" @click="shenpi(scope.row)">审批</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增 -->
    <el-dialog
    v-model="dialogVisible"
    title="请假申请"
    width="600"
     :rules="rules"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="姓名">
      <el-input v-model="form.name" disabled/>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="form.bid" placeholder="请选择部门" disabled>
        <el-option v-for="a in budata" :label="a.departmentName" :value="a.id" />
      
      </el-select>
    </el-form-item>
      <el-form-item label="请假类型">
  <el-radio-group v-model="form.typeId"  :max="1">
    <el-radio  v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </el-radio>
    
  </el-radio-group>


    </el-form-item>
    <el-form-item label="请假时间">
     <el-col :span="11">
        <el-date-picker
          v-model="form.leaveStatrTime"
          type="date"
          placeholder="选择开始时间"
          style="width: 100%"

        />
      </el-col>
      --
      <el-col :span="11">
        <el-date-picker
          v-model="form.leaveEndTime"
          placeholder="选择结束时间"
          style="width: 100%"

        />
      </el-col>
      
    </el-form-item>
   <el-form-item label="报道时间">
     <el-col >
        <el-date-picker
          v-model="form.baodaoTime"
          type="date"
          placeholder="选择报道时间"
          style="width: 100%"
        />
      </el-col>
     
    </el-form-item>

    <el-form-item label="共计时长">
      <el-input v-model="form.countHours" disabled />
    </el-form-item>
    <el-form-item label="请假事由" prop="qingYuan">
      <el-input v-model="form.qingYuan" type="textarea" />
    </el-form-item>
      <el-form-item label="部门领导">
      <el-input v-model="form.buFuName"  disabled/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
  <!-- 修改 -->
    <el-dialog
    v-model="dialogVisibleupdate"
    title="请假申请"
    width="600"
     :rules="rules"
  >
    <el-form :model="formupdate" label-width="auto" style="max-width: 600px">
    <el-form-item label="姓名">
      <el-input v-model="formupdate.name" disabled/>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="formupdate.bid" placeholder="请选择部门" disabled>
        <el-option v-for="a in budata" :label="a.departmentName" :value="a.id" />
      
      </el-select>
    </el-form-item>
      <el-form-item label="请假类型">
  <el-radio-group v-model="formupdate.typeId"  :max="1">
    <el-radio  v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </el-radio>
    
  </el-radio-group>


    </el-form-item>
    <el-form-item label="请假时间">
     <el-col :span="11">
        <el-date-picker
          v-model="formupdate.leaveStatrTime"
          type="date"
          placeholder="选择开始时间"
          style="width: 100%"

        />
      </el-col>
      --
      <el-col :span="11">
        <el-date-picker
          v-model="formupdate.leaveEndTime"
          placeholder="选择结束时间"
          style="width: 100%"

        />
      </el-col>
      
    </el-form-item>
   <el-form-item label="报道时间">
     <el-col >
        <el-date-picker
          v-model="formupdate.baodaoTime"
          type="date"
          placeholder="选择报道时间"
          style="width: 100%"
        />
      </el-col>
     
    </el-form-item>

    <el-form-item label="共计时长">
      <el-input v-model="formupdate.countHours" disabled />
    </el-form-item>
    <el-form-item label="请假事由" prop="qingYuan">
      <el-input v-model="formupdate.qingYuan" type="textarea" />
    </el-form-item>
      <el-form-item label="部门领导">
      <el-input v-model="formupdate.buFuName"  disabled/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateApproval">保存</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
  <!-- 审批 -->
    <el-dialog
    v-model="dialogVisibleshenpi"
    title="请假申请"
    width="600"
     :rules="rules"
  >
    <el-form :model="formshenpi" label-width="auto" style="max-width: 600px">
    <el-form-item label="姓名">
      <el-input v-model="formshenpi.name" disabled/>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="formshenpi.bid" placeholder="请选择部门" disabled>
        <el-option v-for="a in budata" :label="a.departmentName" :value="a.id" />
      
      </el-select>
    </el-form-item>
      <el-form-item label="请假类型" disabled>
  <el-radio-group v-model="formshenpi.typeId"  :max="1" disabled>
    <el-radio  v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </el-radio>
    
  </el-radio-group>


    </el-form-item>
    <el-form-item label="请假时间" >
     <el-col :span="11">
        <el-date-picker
          v-model="formshenpi.leaveStatrTime"
          type="date"
          placeholder="选择开始时间"
          style="width: 100%"
          disabled
        />
      </el-col>
      --
      <el-col :span="11">
        <el-date-picker
          v-model="formshenpi.leaveEndTime"
          placeholder="选择结束时间"
          style="width: 100%"
          disabled
        />
      </el-col>
      
    </el-form-item>
   <el-form-item label="报道时间" disabled>
     <el-col >
        <el-date-picker
          v-model="formshenpi.baodaoTime"
          type="date"
          placeholder="选择报道时间"
          style="width: 100%"
          disabled
        />
      </el-col>
     
    </el-form-item>

    <el-form-item label="共计时长" >
      <el-input v-model="formshenpi.countHours" disabled />
    </el-form-item>
    <el-form-item label="请假事由" prop="qingYuan" >
      <el-input v-model="formshenpi.qingYuan" type="textarea" disabled/>
    </el-form-item>
      <el-form-item label="部门领导">
      <el-input v-model="formshenpi.buFuName"  disabled/>
    </el-form-item>
     <el-form-item label="审核">
      <el-radio-group v-model="formshenpi.approvalState">
      <el-radio :value="true" size="large">通过</el-radio>
      <el-radio :value="false" size="large">不通过</el-radio>
      <el-input v-show="formshenpi.approvalState==false" v-model="formshenpi.approcalYuan" label="原因"/>
    </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="approvalshen">提交</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { en } from 'element-plus/es/locales.mjs';
import moment from 'moment';
import { onMounted, ref, watch } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import read from '../../http/AxiosHelper';
import write from '../../http/AxiosHelper1';
onMounted(()=>{
    getapproval();
    getdepartment();
})
//列表
const handleClick = () => {
  console.log('click')
}

const cities = ['事假', '病假', '婚假', '产假']
//条件查询字段
const formInline=ref({
    LeaveStatrTime:'',
    LeaveEndTime:'',
    ApprovalState:'',
    Name:''
})
//分页字段
const page=ref({
    PageIndex:1,
    PageSize:15,
    Count:0,
    Pcount:0
})
const tableData = ref([]);
//查询审批信息
const getapproval=()=>{
    read.get("/api/Approval/GetApproval",{params:{
        LeaveStatrTime:formInline.value.LeaveStatrTime,
        LeaveEndTime:formInline.value.LeaveEndTime,
        ApprovalState:formInline.value.ApprovalState,
        Name:formInline.value.Name,
        PageIndex:page.value.PageIndex,
        PageSize:page.value.PageSize,
        Uid:Number(localStorage.getItem("id")),
    }}).then(res=>{
        tableData.value=res.data.datas;
        page.value.Count=res.data.totalCount;
        page.value.Pcount=res.data.totalPage;
    })
}
watch(page.value,()=>{
    getapproval();
},{deep:true})
watch(formInline.value,()=>{
    getapproval();
},{deep:true})
//新增
const dialogVisible=ref(false);
import { reactive } from 'vue'
import http from '@/http/AxiosHelper';
//新增数据
const form = reactive({
  "name": "",
  "bid": Number(localStorage.getItem("bid")) ,
  "typeId": "",
 "leaveStatrTime": "",
  "leaveEndTime": "",
  "baodaoTime": "",
  "countHours":0,
  "qingYuan": "",
  "approcalYuan": "",
  "buFuName": "",
  "approvalState": false,
  "uid":Number(localStorage.getItem("id"))
})
//计算总时长
watch(
  () => [form.leaveStatrTime, form.leaveEndTime],
  ([start, end]) => {
    if (start && end) {
      const s = new Date(start)
      const e = new Date(end)
      const diff = Math.floor((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24)) 
      form.countHours = diff > 0 ? diff * 8 : 0
    } else {
      form.countHours = 0
    }
  }
)

//新增打开弹框方法
const openadd=()=>{
dialogVisible.value = true;
fanbufuname();
form.name=localStorage.getItem("name")||"";
}
//反填部门领导人
const fanbufuname=()=>{
  read.get("/api/Approval/GetBuUserName",{params:{DepartmentId:form.bid}}).then(res=>{
    form.buFuName=res.data.data;
  })
}
//部门下拉框
const budata=ref();
const getdepartment=()=>{
  read.get("/api/Department/GetDepartment").then(res=>{
    budata.value=res.data.data;
  })
}
//添加方法
const onSubmit = () => {
    write.post("/api/Approval/AddApproval",form).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.msg);
        dialogVisible.value=false;
        form.approcalYuan="";
        

        getapproval();
      }
      else{
        ElMessage.error(res.data.msg);
      }
    })
}
const locationOptions = ['Home', 'Company', 'School']
const rules = reactive<FormRules>({
  qingYuan: [
    { max: 140, message: '', trigger: 'blur' },
  ],
})

const dialogVisibleupdate=ref(false);
const formupdate = reactive({
  "id":0,
  "name": "",
  "bid": Number(localStorage.getItem("bid")) ,
  "typeId": "",
 "leaveStatrTime": "",
  "leaveEndTime": "",
  "baodaoTime": "",
  "countHours":0,
  "qingYuan": "",
  "approcalYuan": "",
  "buFuName": "",
  "approvalState": false
})
const eidt=(row:any)=>{
  dialogVisibleupdate.value=true;
  formupdate.id=row.id;
  formupdate.approcalYuan=row.approcalYuan;
  formupdate.approvalState=row.approvalState;
  formupdate.baodaoTime=row.baodaoTime;
  formupdate.bid=row.bid;
  formupdate.buFuName=row.buFuName;
  formupdate.countHours=row.countHours;
  formupdate.leaveEndTime=row.leaveEndTime;
  formupdate.leaveStatrTime=row.leaveStatrTime;
  formupdate.name=row.name;
  formupdate.qingYuan=row.qingYuan;
  formupdate.typeId=row.typeId;
}
const updateApproval=()=>{
  write.put("/api/Approval/UpdateApproval",formupdate).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.msg);
      dialogVisibleupdate.value=false;
      getapproval();
    }
    else{
      ElMessage.error(res.data.msg);
    }
  })
}

//删除
const delApproval=(id:any)=>{
   ElMessageBox.confirm(
    '确认要删除吗？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     write.put("/api/Approval/DelApproval",{id:id}).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.msg);
        getapproval();
      }
      else{
        ElMessage.error(res.data.msg);
      }
     })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

//审批
const dialogVisibleshenpi=ref(false);
const formshenpi = reactive({
   "id":0,
  "name": "",
  "bid": Number(localStorage.getItem("bid")) ,
  "typeId": "",
 "leaveStatrTime": "",
  "leaveEndTime": "",
  "baodaoTime": "",
  "countHours":0,
  "qingYuan": "",
  "approcalYuan": "",
  "buFuName": "",
  "approvalState": null
})
const shenpi=(row:any)=>{
  dialogVisibleshenpi.value=true;
  formshenpi.approcalYuan=row.approcalYuan;
  formshenpi.approvalState=null;
  formshenpi.baodaoTime=row.baodaoTime;
  formshenpi.bid=row.bid;
  formshenpi.buFuName=row.buFuName;
  formshenpi.countHours=row.countHours;
  formshenpi.leaveEndTime=row.leaveEndTime;
  formshenpi.leaveStatrTime=row.leaveStatrTime;
  formshenpi.name=row.name;
  formshenpi.qingYuan=row.qingYuan;
  formshenpi.typeId=row.typeId;
  formshenpi.id=row.id;
}
const approvalshen=()=>{
    write.put("/api/Approval/UpdateApprovalState",{
      id:formshenpi.id,
      approvalState:formshenpi.approvalState,
      approcalYuan:formshenpi.approcalYuan
    }).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.msg);
        dialogVisibleshenpi.value=false;
        getapproval();
      }
      else{
        ElMessage.error(res.data.msg);
      }
    })
}
</script>


<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>